/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import MyModal from '../../../components/common/MyModal';
import { Form, Row, Col, Select, Input, message, Button, Upload, Checkbox, DatePicker } from 'antd';
import MyIcon from '../../../components/common/MyIcon';
import config from '../../../config';
import style from "./MonthModal.less";
import moment from 'moment';
import myModalStyles from '../../../components/common/Mymodal.less';
import request from '../../../utils/request';
// import styles from './sub.less';
import MyTable from "../../../components/common/MyTable";
const FormItem = Form.Item;

class MonthModal extends Component {
  state = {
    solidType: '1',
    tableData: [],
    upDis: true
  };
  componentDidMount() {

  };
  // modal保存
  onModalSave = () => {
    this.props.form.validateFieldsAndScroll((err, val) => {
      if (!err) {
        this.props.onModalSave(val, this.props.type)
      }
    });
  };
  //编辑
  onEdit = () => {
    this.props.onEdit()
  }
  // 筛选条件组件change事件
  getChangeValue(value, e) {
    let t = this;
    let params = {};
    params[value] = e.target.value;
    t.setState({ params });
  }
  onCheckbox(value, e) {
    let t = this;
    let params = {};
    params[value] = e.target.value;
    t.setState({ params });
  }

  render() {
    let t = this;
    let { tableData, upDis } = t.state;

    let { getFieldDecorator } = t.props.form;

    let titleText = this.props.titleText
    let arr1 = this.props.moddleArr;

    return (
      <div>

          <Form  onSubmit={t.onModalSave}>
          <Button onClick={t.onModalSave} style={{position:'absolute',top:20,right:120}}>
            保存
          </Button>

          <Button onClick={t.onEdit} type="primary" style={{position:'absolute',top:20,right:25}}>
            编辑
          </Button>
            <Row gutter={48} style={{  paddingBottom: 290, transform: "rotate(-90deg)",paddingTop:270,marginTop:90 }}>
              <table className={style.table_box}>
                <tr>
                  <td colSpan="1" rowSpan="3" style={{ width: 280 }}>填表人</td>
                  <td colSpan="8" rowSpan="1" style={{ width: 50, writingMode: "vertical-bt-rl" }}>企业其他相关情况</td>
                  <td colSpan="9" rowSpan="1" style={{ width: 50, height: 200 }}>废物接受,贮存,处置/利用情况</td>

                </tr>

                <tr>
                  <td colSpan="2" rowSpan="1" style={{ height: 120 }}>事故发生情况</td>
                  <td colSpan="3" rowSpan="1" style={{ width: 100 }}>应急演练情况</td>
                  <td colSpan="3" rowSpan="1" style={{ width: 100 }}>培训情况</td>
                  <td colSpan="6" rowSpan="1" style={{ width: 100 }}>新产生废物情况</td>
                  <td colSpan="3" rowSpan="1" style={{ width: 100 }}>处置,利用,贮存情况</td>
                </tr>

                <tr>
                  <td style={{ width: 300, height: 200 }}><div className={style.tdBox}>事故发生内容</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>是否有事故发生</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>应急演练人员</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>应急演练内容</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>应急演练时间</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>培训人员</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>培训内容</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>培训时间</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>新产生危险废物累计贮存量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>新产生危险废物处理量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>新产生危废物量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>新产生固体废物累计贮存量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>新产生固体废物处置量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>新产生固体废物量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>累计贮存危险废物量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>利用/处置危险废物量(吨)</div></td>
                  <td style={{ width: 300, }}><div className={style.tdBox}>接受危险废物量(吨)</div></td>
                </tr>

                {/* <tr>
                  <td  style={{ width: 100 }}>自行贮存量(吨)</td>
                  <td  style={{ width: 100 }}>自行处置量(吨)</td>
                  <td  style={{ width: 100 }}>委托处理量</td>
                  <td  style={{ width: 100 }}>委托处置外单位名称/许可证</td>
                  <td  style={{ width: 100 }}>自行贮存量(吨)</td>
                  <td  style={{ width: 100 }}>自行处置量(吨)</td>
                  <td  style={{ width: 100 }}>委托处理量</td>
                  <td  style={{ width: 100 }}>委托处置外单位名称</td>
                 
                </tr> */}
                <span></span>


                <tr>
                  {
                    arr1.map((item, index) => {
                      if (item.type === 'input') {
                        return (

                          <td style={{ height: 120, zIndex: 999, transform: "rotate(180deg)" ,borderTop:0}}>
                            {
                              getFieldDecorator(item.paramName, {
                                initialValue: item.initialValue ? item.initialValue : '',
                                rules: item.rules || null
                              })(
                                <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                  placeholder={item.placeholder} disabled={item.disabled} className={style.inputBox} />
                              )
                            }
                          </td>

                        )
                      } else if (item.type === 'datePicker') {
                        let disabled = item.disabledDate ? disabledDate : null;
                        return (
                          <td style={{ height: 120, zIndex: 999, transform: "rotate(180deg)",borderTop:0 }}>
                            {
                              getFieldDecorator(item.paramName, {
                                initialValue: item.initialValue ? item.initialValue : null,
                                rules: item.rules || null
                              })(
                                <DatePicker size={config.size} disabledDate={disabled} disabled={item.disabled} className={style.inputBox} />
                              )
                            }
                          </td>
                        )
                      } else if (item.type === 'Checkbox') {
                        return (
                          <td style={{ height: 120, zIndex: 999, transform: "rotate(180deg)",borderTop:0 }}>
                            {
                              getFieldDecorator(item.paramName, {
                                rules: item.rules || null
                              })(
                                <Checkbox onChange={t.onCheckbox.bind(this, item.paramName)} disabled={item.disabled} defaultChecked={item.initialValue ? item.initialValue : false} className={style.inputBox}></Checkbox>
                              )
                            }

                          </td>
                        )
                      }

                    })
                  }
                </tr>
              </table>
            </Row>

          </Form>
      
      </div>
    )
  }
}
export default Form.create()(MonthModal);
